<!-- 商家列表 -->
<template>
  <wxc-tab-page ref="wxc-tab-page"
                :tab-titles="tabTitles"
                :tab-styles="tabStyles"
                :tab-page-height="tabPageHeight"
                @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
    <!-- 遍历数据[[],[],[]]-->
    <list v-for="(v,index) in tabList"
          :key="index"
          class="item-container"
          :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
      <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
        <text class="indicator-text">松开刷新 ...</text>
        <loading-indicator class="indicator"></loading-indicator>
      </refresh>
      <!-- 分割线组件 -->
      <cell class="border-cell"></cell>
      <!-- 遍历当前导航下的数据 -->
      <cell v-for="(demo,key) in v"
            class="cell"
            :key="key">
        <!-- wxc-pan-item好像是安卓左右滑动的组件 -->
        <wxc-pan-item
              @wxcPanItemPan="wxcPanItemPan">
         <div class="content" @click="jump(demo)">
            <image class='img' :src="demo.icon"></image>
            <div class='main-content'>
              <text class='mian-title'>{{demo.title}}</text>
              <div class='body-content'>
                <text style="font-weight:bold;font-size:27px;color:#FF8C00;margin-right:15px;">{{demo.score}}分</text>
                <text class='body-content-s body-content-sale'>月售{{demo.monthSale}}</text>
                <text class='body-content-s'>{{demo.deliveryTime}}</text>
                <text class='body-content-s'>{{demo.distance}}</text>
                <text class='body-content-s'>起送{{demo.standard}}</text>
                <text class='body-content-s'>配送{{demo.distributionFee}}</text>
                <!-- <text style="font-size:27px;color:#808080;margin-right:15px;"></text> -->
                  <text class='body-content-s body-content-evaluate-s body-content-evaluate'>“{{demo.evaluate}}”</text>

                  <!-- 这其实应该是数据里循环出来的，写的时候没注意优惠所以数据里没有加，这里就写死了-->
                  <div class='boy-content-discount'>
                    <text class='body-content-ss'>20减10</text>
                    <text class='body-content-ss'>20减10</text>
                    <text class='body-content-ss'>20减10</text>
                  </div>
              </div>
            </div>
         </div>
        </wxc-pan-item>
      </cell>
      <loading class="loading" @loading="onloading(index)" :display="loadinging ? 'show' : 'hide'">
        <text class="indicator-text">正在加载更多 ...</text>
        <loading-indicator class="indicator"></loading-indicator>
      </loading>
    </list>
  </wxc-tab-page>
</template>

<script>
  import { WxcTabPage, WxcPanItem, Utils, BindEnv } from 'weex-ui';
  import Config from '../datas/business_config.js';

  let apputils = require('../utils/appUtils')

  const modal = weex.requireModule('modal')
  const navigator = weex.requireModule('navigator')
  export default {
    components: { WxcTabPage, WxcPanItem },
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles,
      tabList: [],
      demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      tabPageHeight: 1334,
      loadinging: false,
      refreshing: false,
    }),
    created () {
      // 获取屏幕高度
      this.tabPageHeight = Utils.env.getPageHeight();
      // 给导航数量相同的空数组，用来存数据，[[],[],[],[]]
      this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
    },
    mounted(){
      this.tabList = Config.BusinessInformation;
    },
    methods: {
      wxcTabPageCurrentTabSelected (e) {
        const self = this;
        const index = e.page;
        /* Unloaded tab analog data request */
        if (!Utils.isNonEmptyArray(self.tabList[index])) {
          //这里是导航切换时，根据不同的导航请求不同数据，将数据插入对应index的二维数组中
          // setTimeout(() => {
          //   Vue.set(self.tabList, index, self.demoList);
          // }, 100);
        }
      },
      wxcPanItemPan (e) {
        if (BindEnv.supportsEBForAndroid()) {
          this.$refs['wxc-tab-page'].bindExp(e.element);
        }
      },
      onloading (index, event) {
        const self = this;
        // 模拟请求上拉新增新增数据
        self.tabList[index].push(
          {
            icon: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3995323738,3528253073&fm=26&gp=0.jpg',
            title: '肯德基宅急送(上拉新增)页面'+index,
            score: '4.9',
            monthSale: '1110',
            deliveryTime: '14分钟',
            distance: '1km',
            standard: '¥0',
            distributionFee: '¥5',
            evaluate: '味道很不错！味道很不错！'
          }
        );
        // modal.toast({ message: 'Loading', duration: 1 })
        this.loadinging = true
        // 超时处理
        setTimeout(() => {
          this.loadinging = false
        }, 1000)
      },
      onrefresh (event) {
        const self = this;
        // 模拟重新请求数据
        self.tabList = Config.BusinessInformation;
        // modal.toast({ message: 'Refreshing', duration: 1 })
        this.refreshing = true
        setTimeout(() => {
          this.refreshing = false
        }, 1000)
      },
      // encodeURIComponent(JSON.stringify({id:index}))
      // 原生 navigator 跳转，需要搭配 apputils.getUrl
      // jump(index, event){
      //   console.log('will jump')
      //   navigator.push({
      //     url: apputils.getUrl('page/menu'),
      //     animated: "true"
      //   })
      // }
      // 页面跳转，传参数
      jump(e){
        const self = this;
        self.$router.push({ name: 'Menu', params: {
          title: e.title, 
          score: e.score, 
          monthSale: e.monthSale, 
          deliveryTime: e.deliveryTime,
          icon: e.icon,
          distributionFee: e.distributionFee,
          standard: e.standard 
        }});
        // // 跨页面通讯，传数据
        // const a = new BroadcastChannel('menu')
        // const datas = {datas: e }
        // a.postMessage({ datas })
      }
    }
  };
</script>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
    /* 只能在list上左移，如果在子组件上左移，会出现不一致的问题，ios与页面都一致，但是安卓没有左移成功 */
    left: 30px;
  }

  .border-cell {
    background-color: #f2f3f4;
    width: 690px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-color: #e0e0e0;
  }

  .cell {
    width: 690px;
  }

  /* wxc-pan-item{
    align-content: space-around;
  } */

  .content{
    background-color: #ffffff;
    width:690px;
    height:300px;
    border-radius: 40px;
    margin-bottom: 20px;
    flex-direction: row;
  }

  .img{
    width:200px;
    height:200px;
    left:20px;
    top:50px;
  }

  .main-content{
    margin: 20px;
    /* top:25px; */
    left:40px;
    width:490px;
    /* align-content: space-around; */
    align-content: flex-start;
  }

  .mian-title{
    font-size:35px;
    font-weight: bold;
  }

  .body-content{
    flex-direction:row;
    flex-wrap:wrap;
    margin-top:5px;
  }

  .body-content-s{
    font-size:27px;
    color:#808080;
    margin-right:15px;
    height: 45px;
    /* margin-bottom: 5px; */
    /* margin-top:10px; */
  }

  .body-content-sale{
    margin-right:40px;
  }

  .body-content-evaluate{
    /* margin-top:3px; */
    margin-bottom: 15px;
    background-color: #FFEBCD;
    padding: 5px;
    border-radius: 8px;
    margin-top: 5px;
  }

  .body-content-evaluate-s{
    color: #F4A460;
  }

  /* .body-content-s-jm{
    border: 1px solid #DCDCDC;
  } */

  .boy-content-discount{
    flex-direction: row;
    /* border: 1px solid #DCDCDC; */
    /* margin-top: 10px; */
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #DCDCDC;
  }

  .body-content-ss{
    /* height: 30px; */
    font-size:27px;
    color:#F08080;
    margin-top:3px;
    justify-content: center;
    padding: 0px 10px;
    /* weex 不支持简写，需要分开写样式*/
    /* border-left:1px solid #DCDCDC; */
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #DCDCDC;
  }

  .body-content-ss:first-child{
    border-left:none;
  }

  .loading {
    width: 750;
    align-items: center;
  }
  .indicator-text {
    color: #888888;
    font-size: 30px;
    text-align: center;
  }
  .indicator{
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: #888888;
  }
  .refresh {
    width: 750;
    align-items: center;
  }

</style>
